<article>
  <p>在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便，但也要避免滥用。使用之前应该了解以下要点。</p>
  <ul>
    <li>尽量少用或不用辅助类，如果有对应的控件或组件使用。</li>
    <li>当相同的场景需要大量使用辅助类时，这时应该考虑是否单独定义一个新的控件或组件。</li>
  </ul>
</article>

<section>
  <header><h3>小字号文本</h3></header>
  <article>
    <p>使用标签<code>&lt;small&gt;</code>或者CSS类名<code>.small</code>来使得文本字号比正常情况小一号。</p>
    <div class="example">
      <small>小字号文本，small text.</small>
    </div>
    <pre><code>&lt;small&gt;小字号文本，small text.&lt;/small&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>文本颜色</h3></header>
  <article>
    <div class="example" contenteditable="true">
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur.</p>
      <p class="text-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
      <p class="text-danger">Molestias maxime perspiciatis saepe unde corporis.</p>
      <p class="text-success">Culpa eum modi assumenda, velit vitae.</p>
      <p class="text-warning">Cumque consequuntur modi fugiat debitis dolorum.</p>
      <p class="text-info">Minus nisi consectetur dolorum temporibus
      architecto.</p>
      <p class="text-important">Tenetur ullam amet illo sint magni!</p>
      <p class="text-special">Sapiente voluptates debitis dolor ipsam libero!</p>
    </div>
    <pre><code>&lt;p class=&quot;text-muted&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-primary&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-info&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-important&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-special&quot;&gt;...&lt;/p&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>文本背景高亮</h3></header>
  <article>
    <div class="example" contenteditable="true">
      <p class="hl-default">Lorem ipsum dolor sit amet, consectetur.</p>
      <p class="hl-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
      <p class="hl-danger">Molestias maxime perspiciatis saepe unde
      corporis.</p>
      <p class="hl-success">Culpa eum modi assumenda, velit vitae.</p>
      <p class="hl-warning">Cumque consequuntur modi fugiat debitis
      dolorum.</p>
      <p class="hl-info">Minus nisi consectetur dolorum temporibus
      architecto.</p>
      <p class="hl-important">Tenetur ullam amet illo sint magni!</p>
      <p class="hl-special">Sapiente voluptates debitis dolor ipsam
      libero!</p>
    </div>
<pre><code>&lt;p class=&quot;hl-default&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-primary&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-danger&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-success&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-warning&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-info&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-important&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;hl-special&quot;&gt;...&lt;/p&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>文本背景色</h3></header>
  <article>
    <div class="example" contenteditable="true">
      <p class="bg-default">Lorem ipsum dolor sit amet, consectetur.</p>
      <p class="bg-primary">Perferendis eveniet ipsa modi nesciunt, vel.</p>
      <p class="bg-danger">Molestias maxime perspiciatis saepe unde corporis.</p>
      <p class="bg-success">Culpa eum modi assumenda, velit vitae.</p>
      <p class="bg-warning">Cumque consequuntur modi fugiat debitis dolorum.</p>
      <p class="bg-info">Minus nisi consectetur dolorum temporibus architecto.</p>
      <p class="bg-important">Tenetur ullam amet illo sint magni!</p>
      <p class="bg-special">Sapiente voluptates debitis dolor ipsam libero!</p>
    </div>
    <pre><code>&lt;p class=&quot;bg-default&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-primary&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-danger&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-success&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-warning&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-info&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-important&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;bg-special&quot;&gt;...&lt;/p&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>禁用文本换行</h3></header>
  <article>
    <p>
    使所有文本在一行显示。超出的部分将会被隐藏。只需要使用<code>.text-nowrap</code>或者<code>.nobr</code>。</p>
    <pre><code>&lt;h2 class=&quot;text-nowrap&quot;&gt;...&lt;/h2&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>文本超出省略</h3></header>
  <article>
    <p>使所有文本在一行显示。超出的部分会被截断，并且在文本末尾添加省略号。使用<code>.text-ellipsis</code>。</p>
    <pre><code>&lt;h2 class=&quot;text-ellipsis&quot;&gt;...&lt;/h2&gt;</code></pre>
    <div class="alert alert-warning">
      <p>并不是所有浏览器都支持此选项。</p>
    </div>
  </article>
</section>

<section>
  <header><h3>内容边距</h3></header>
  <article>
    <p>在内容元素内添加内边距，使得元素更易于阅读。使用<code>.with-padding</code>。</p>
    <p>内容边距和文本背景一起使用的例子。</p>
    <div class="example" contenteditable="true">
      <p class="with-padding bg-default">Lorem ipsum dolor sit amet,
      consectetur.</p>
      <p class="with-padding bg-primary">Perferendis eveniet ipsa modi nesciunt,
      vel.</p>
      <p class="with-padding bg-danger">Molestias maxime perspiciatis saepe unde
      corporis.</p>
      <p class="with-padding bg-success">Culpa eum modi assumenda, velit vitae.</p>
      <p class="with-padding bg-warning">Cumque consequuntur modi fugiat debitis
      dolorum.</p>
      <p class="with-padding bg-info">Minus nisi consectetur dolorum temporibus
      architecto.</p>
      <p class="with-padding bg-important">Tenetur ullam amet illo sint magni!</p>
      <p class="with-padding bg-special">Sapiente voluptates debitis dolor ipsam
      libero!</p>
    </div>
<pre><code>&lt;p class=&quot;with-padding bg-default&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-primary&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-danger&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-success&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-warning&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-info&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-important&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;with-padding bg-special&quot;&gt;...&lt;/p&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>关闭按钮</h3></header>
  <article>
    <p>通常用来关闭消息框或者模态框。</p>
    <div class="example">
      <button type="button" class="close" style="float:none"><span aria-hidden=
      "true">×</span><span class="sr-only">Close</span></button>
    </div>
    <pre><code>&lt;button type=&quot;button&quot; class=&quot;close&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;Close&lt;/span&gt;&lt;/button&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>三角符号</h3></header>
  <article>
    <div class="example"><span class="caret"></span></div>
    <pre><code>&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;</code></pre>
  </article>
</section>

<section>
  <header>
    <h3>浮动</h3>
  </header>
  <article>
    <p>强制使得一个元素向左或者向右浮动。</p>
<pre><code>&lt;div class=&quot;pull-left&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;pull-right&quot;&gt;&lt;/div&gt;</code></pre>
    <p>对应的CSS代码：</p>
<pre><code>.pull-right
{
  float: right !important;
}
.pull-left
{
  float: left !important;
}</code></pre>
  </article>
</section>

<section>
  <header>
    <h3>清除浮动</h3>
  </header>
  <article>
    <p>只需要一个CSS类名即可使得内部浮动元素也具备高度等特性。</p>
    <pre><code>&lt;div class=&quot;clearfix&quot;&gt;...&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>块居中</h3></header>
  <article>
    <p>使得一个具备固定宽度的能够在父级容器中居中显示。</p>
    <pre><code>&lt;div class=&quot;center-block&quot;&gt;...&lt;/div&gt;</code></pre>
    <p>对应的CSS代码：</p>
<pre><code>.center-block
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}</code></pre>
  </article>
</section>

<section>
  <header><h3>隐藏文本</h3></header>
  <article>
    <p>隐藏文本能够使得标签内的文本不显示，通常用于图片代替文本。</p>
    <pre><code>&lt;h1 class=&quot;text-hide&quot;&gt;此处文本不会显示&lt;/h1&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>显示或隐藏元素</h3></header>
  <article>
    <p>提供多个辅助类来帮助切换内容显示。</p>
<pre class="lang-css"><code>.hide
{
  display: none;
}
.hidden
{
  display: none!important;
}
.show
{
  display: block;
}
.showing
{
  display: block!important;
}
.invisible
{
  visibility: hidden;
}</code></pre>
    <p>
    <code>.hidden</code>和<code>.showing</code>具备更高的优先级，防止其他规则重写。<code>.invisible</code>仅仅隐藏元素，但元素内容所占的空间并不会清除。</p>    
  </article>
</section>
